const path = require('path')
// 代码打包之后取出console.log压缩代码
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')

// 压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const { host, port, outputDir, publicPath, baseURL } = require('./config')

// 是否使用gzip
const productionGzip = true
// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css']
// 外链形式导入的模块
const externals = {
	vue: 'Vue',
	'vue-router': 'VueRouter',
	vuex: 'Vuex',
	axios: 'axios',
	'element-ui': 'ELEMENT',
	nprogress: 'NProgress'
}
// CDN外链，会插入到index.html中
const cdn = {
	css: ['https://cdn.tdribigdata.com/web/static/nprogress%400.2.0.min.css'],
	js: [
		'https://cdn.tdribigdata.com/web/static/vue%402.6.11.min.js',
		'https://cdn.tdribigdata.com/web/static/nprogress%400.2.0.min.js',
		'https://cdn.tdribigdata.com/web/static/vue-router%403.5.1.min.js',
		'https://cdn.tdribigdata.com/web/static/vuex%403.6.2.min.js',
		'https://cdn.tdribigdata.com/web/static/axios%400.21.1.min.js',
		'https://cdn.tdribigdata.com/web/static/element-ui%402.15.3.min.js'
	]
}

function resolve(dir) {
	return path.join(__dirname, dir)
}
console.log(host)
module.exports = {
	publicPath,
	outputDir: `${outputDir}${publicPath}`,
	assetsDir: 'static',
	// 生产环境是否生成 sourceMap 文件
	productionSourceMap: false,
	lintOnSave: process.env.NODE_ENV !== 'production',
	// resolve: {
	// 	extensions: ['.js', '.json', '.vue'],
	// },
	devServer: {
		overlay: {
			warnings: true,
			errors: true
		},
		host: '0.0.0.0',
		port,
		proxy: {
			'': {
				target: host, // 后端ip地址及端口
				ws: true, // 是否跨域
				changeOrigin: true,
				secure: true
			}
		}
	},
	configureWebpack: config => {
		// 是否使用分析插件
		if (process.env.REPORT === '1') {
			config.plugins.push(new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)())
		}
		// 缓存优化插件
		config.plugins.push(new HardSourceWebpackPlugin())

		if (process.env.NODE_ENV === 'production') {
			// 打包环境时，插件js使用cdn方式导入
			config.externals = externals
			config.optimization = {
				minimizer: config.optimization.minimizer,
				splitChunks: {
					chunks: 'all' // async表示抽取异步模块，all表示对所有模块生效，initial表示对同步模块生效
				}
			}
			// 为生产环境修改配置...
			config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
			config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
			config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']

			// 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
			productionGzip &&
				config.plugins.push(
					new CompressionWebpackPlugin({
						algorithm: 'gzip',
						test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
						threshold: 8192, // 只有大小大于该值的资源会被处理 8192
						minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
						deleteOriginalAssets: false // 删除原文件
					})
				)
		}
	},
	chainWebpack: config => {
		// 定义文件夹的路径
		config.resolve.alias
			.set('@', resolve('src'))
			.set('@public', resolve('public'))
			.set('@utils', resolve('src/utils'))
			.set('@assets', resolve('src/assets'))
			.set('@components', resolve('src/components'))
			.set('@pages', resolve('src/views'))
			.set('@config', resolve('src/global/config'))

		// html中需要的变量
		config.plugin('html').tap(args => {
			// 打包环境时，插件js使用cdn方式导入
			if (process.env.NODE_ENV === 'production') {
				args[0].cdn = cdn
			}
			return args
		})

		// 添加全局变量
		config.plugin('provide').use(webpack.ProvidePlugin, [
			{
				$http: ['@/api/index.js', 'default'],
				$day: 'dayjs',
				$config: ['@/global/config.js', 'default'],
				$dict: ['@/global/dict.js', 'default']
			}
		])

		// 打包过程中需要替换的变量
		config.plugin('define').tap(args => {
			// 当前所属环境（dev, alpha, prd）
			args[0]['process.env'].ENV = `"${process.env.ENV}"`
			// 接口域名
			args[0]['process.env'].BASE_URL = `"${baseURL}"`
			return args
		})

		// svg图合并
		config.module
			.rule('svg')
			.exclude.add(/(\/|\\)svg(\/|\\)[\s\S]*\.svg$/)
			.end()
		config.module
			.rule('icons')
			.test(/\.svg$/)
			.include.add(/(\/|\\)svg(\/|\\)[\s\S]*\.svg$/)
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]'
			})
			.end()

		if (process.env.NODE_ENV === 'production') {
			// 开启预加载
			config.plugin('preload').tap(() => [
				{
					rel: 'preload',
					fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
					include: 'initial'
				}
			])
			// 修复HMR
			config.resolve.symlinks(true)
		} else {
			config.module
				.rule('eslint')
				.use('eslint-loader')
				.loader('eslint-loader')
				.tap(options => {
					options.formatter = require('eslint/lib/cli-engine/formatters/codeframe')
					// options.emitWarning = true
					// options.emitError = false
					return options
				})
		}
	},
	// 使用 thread-loader
	parallel: require('os').cpus().length > 1,
	// 是否开启pwa
	// pwa: {},
	css: {
		loaderOptions: {
			sass: {
				prependData: `
          @import "@/styles/var.scss";
        `
			}
		}
	}
}
